<template>
  <div class="app_NavBax horizontalFlex" :class="{'show_desc': state.setting.showDesc}" @click="jump()">
    <div class="icon_wrapper">
      <img :src="'https://gesdh.cn/geshanzsq-file' + props.data.sitePath" alt="">
    </div>
    <div class="text_wrapper">
      <div class="site_name">{{ props.data.siteName }}</div>
      <div class="site_description">{{ props.data.siteDescription }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";

let store = useStore();
let state = store.state;
let props = defineProps({
  data: {
    type: Object
  }
});
const jump = () => {
  let { siteUrl } = props.data;

  window.open(siteUrl, state.setting.newTabOpenApp ? '_blank' : '_self');
};
</script>

<style scoped lang="scss">
.app_NavBax {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border: 1px solid #e6ebf5;
  height: 70px;
  background-color: #fff;
  cursor: pointer;
  transition: .2s;
  position: relative;
  overflow: hidden;
  border-radius: var(--el-border-radius-base);
  &:hover{
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    :deep(.site_name) {
      color: rgb(67, 132, 245);
    }
  }
  .icon_wrapper{
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .text_wrapper {
    //text-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    .site_name{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      color: var(--van-text-color);
    }
    .site_description{
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-top: 5px;
      font-size: 14px;
      //height: 50px;
      display: none;
      color: var(--van-text-color);
      opacity: .8;
    }
  }
  &.show_desc{
    height: 105px;
    .text_wrapper{
      .site_description{
        display: -webkit-box;
      }
    }
  }
}
</style>